<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber"
			 @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="info">
					<view class="info-title flex-row" v-if="data.share_setting.level==3">
						<navigator class="flex-x-center width" openType="redirect" url="/pages/share-team/share-team?status=1">
							<view :class="['info-text', data.status==1?'active':'']">{{data.share_setting.first_name||'一级'}}({{data.first_count}})</view>
						</navigator>
						<navigator class="flex-x-center width" openType="redirect" url="/pages/share-team/share-team?status=2">
							<view :class="['info-text', data.status==2?'active':'']">{{data.share_setting.second_name||'二级'}}({{data.second_count}})</view>
						</navigator>
						<navigator class="flex-x-center width" openType="redirect" url="/pages/share-team/share-team?status=3">
							<view :class="['info-text', data.status==3?'active':'']">{{data.share_setting.third_name||'三级'}}({{data.third_count}})</view>
						</navigator>
					</view>
					<view class="info-title flex-row" v-else-if="data.share_setting.level==2">
						<navigator class="flex-x-center width-50" openType="redirect" url="/pages/share-team/share-team?status=1">
							<view :class="['info-text', data.status==1?'active':'']">{{data.share_setting.first_name||'一级'}}({{data.first_count}})</view>
						</navigator>
						<navigator class="flex-x-center width-50" openType="redirect" url="/pages/share-team/share-team?status=2">
							<view :class="['info-text', data.status==2?'active':'']">{{data.share_setting.second_name||'二级'}}({{data.second_count}})</view>
						</navigator>
					</view>
					<block v-else></block>
					<view class="info-content" :style="data.share_setting.level==1?'padding-top:0':''">
						<view class="info-label" v-for="(item,index) in data.list" :key="item.id">
							<view class="info-up flex-y-center flex-row">
								<view class="info-img flex-grow-0">
									<image class="img" :src="item.avatar_url"></image>
								</view>
								<view class="info-text flex-grow-1">
									<view class="info-name flex-row" style="justify-content:space-between;">
										<view class="flex-grow-0 flex-y-center text-more" style="width:300upx;display:block">{{item.nickname}}</view>
										<view class="flex-grow-0 flex-y-center fs-sm">推广{{item.child_count}}人</view>
									</view>
									<view class="info-time">注册时间：{{item.time}}</view>
								</view>
							</view>
							<view class="info-down flex-y-center">
								<view class="info-left">消费{{item.price}}元</view>
								<view class="info-right">
									<view class="info-order">{{item.count}}个订单</view>
								</view>
							</view>
						</view>
					</view>
					<view class="info-footer flex-row" v-if="data.no_more">
						<view class="info-before">
							<view class="info-border"></view>
						</view>
						<view class="info-t">没有更多了</view>
						<view class="info-after">
							<view class="info-border"></view>
						</view>
					</view>
				</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>
	var myVue = {};
	var t = !1,
		a = !1,
		e = 2;
	export default {
		data() {
			return {
				data: {
					status: 1,
					first_count: 0,
					second_count: 0,
					third_count: 0,
					list: Array,
					no_more: !1
				},
			};
		},
		onLoad: function(s) {
			myVue = this;
			myVue.getApp.page.onLoad(this, s);
			var o = this,
				i = myVue.getApp.core.getStorageSync(myVue.getApp.const.SHARE_SETTING);
			o.setData({
				share_setting: i
			}), a = !1, t = !1, e = 2, o.GetList(s.status || 1);
		},
		onReachBottom: function() {
			t || this.loadData();
		},
		methods: {
			loadData: function() {
				if (!a) {
					a = !0;
					var s = this;
					myVue.getApp.core.showLoading({
						title: "正在加载",
						mask: !0
					}), myVue.getApp.request({
						url: myVue.getApp.api.share.get_team,
						data: {
							status: s.data.status,
							page: e
						},
						success: function(a) {
							s.setData({
								first_count: a.data.first,
								second_count: a.data.second,
								third_count: a.data.third,
								list: s.data.list.concat(a.data.list)
							}), 0 == a.data.list.length && (t = !0, s.setData({
								no_more: !0
							}));
						},
						complete: function() {
							s.getApp.core.hideLoading(), a = !1, e++;
						}
					});
				}
			},
			GetList: function(e) {
				var s = this;
				a || (a = !0, s.setData({
					status: parseInt(e || 1)
				}), myVue.getApp.core.showLoading({
					title: "正在加载",
					mask: !0
				}), myVue.getApp.request({
					url: myVue.getApp.api.share.get_team,
					data: {
						status: s.data.status,
						page: 1
					},
					success: function(a) {
						s.setData({
							first_count: a.data.first,
							second_count: a.data.second,
							third_count: a.data.third,
							list: a.data.list
						}), 0 == a.data.list.length && (t = !0, s.setData({
							no_more: !0
						}));
					},
					complete: function() {
						s.getApp.core.hideLoading(), a = !1;
					}
				}));
			},
		},
	}
</script>

<style scoped>
	.info {
		width: 100%;
	}

	.width {
		width: 33.33333333%;
		text-align: center;
	}

	.width-50 {
		width: 50%;
		text-align: center;
	}

	.info .info-title .info-text.active {
		color: #ff4544;
		border-bottom: 4upx #ff4544 solid;
	}

	.info .info-title {
		width: 100%;
		height: 100upx;
		padding: 0 24upx;
		border-bottom: 1upx #e3e3e3 solid;
		font-size: 13pt;
		background-color: #fff;
		line-height: 80upx;
		position: fixed;
		top: var(--window-top);
		left: 0;
	}

	.info-title .info-text {
		height: 100upx;
		line-height: 100upx;
	}

	.info .info-content {
		width: 100%;
		margin-bottom: 12upx;
		padding-top: 100upx;
	}

	.info .info-content .info-label {
		width: 100%;
		background-color: #fff;
		padding: 0 24upx;
		height: 240upx;
		margin-bottom: 20upx;
	}

	.info-label .info-up {
		width: 100%;
		height: 160upx;
		border-bottom: 1upx #eeeeee solid;
	}

	.info-label .info-down {
		width: 100%;
		height: 80upx;
		color: #666;
	}

	.info-label .info-up .info-img {
		margin-right: 24upx;
	}

	.info-up .info-img .img {
		width: 100upx;
		height: 100upx;
	}

	.info-up .info-text .info-name {
		color: #353535;
		margin-bottom: 16upx;
	}

	.info-up .info-text .info-time {
		font-size: 9pt;
		color: #666666;
	}

	.info-down .info-left {
		width: 50%;
		height: 80upx;
		line-height: 80upx;
	}

	.info-down .info-right {
		float: right;
		height: 80upx;
		width: 50%;
		line-height: 80upx;
		text-align: right;
	}

	.info .info-footer {
		color: #bbb;
		text-align: center;
		width: 100%;
		padding: 0 100upx;
		height: 60upx;
		line-height: 60upx;
	}

	.info .info-footer .info-t {
		height: 60upx;
		margin: 0 20upx;
	}

	.info .info-footer .info-before {
		width: 168upx;
		height: 60upx;
	}

	.info .info-footer .info-after {
		width: 168upx;
		height: 60upx;
	}

	.info .info-footer .info-border {
		border-bottom: 1upx #e3e3e3 solid;
		padding-bottom: 30upx;
	}
</style>
